﻿
@{
    ViewBag.Title = "Blog";
}

<div class="content-heading">New Article</div>
<div class="alert alert-info">
    <em class="fa fa-exclamation-circle fa-lg fa-fw"></em>
    <span>
        There is an autosaved version of this article that is more recent than the version below. <a href="#" class="text-white">Restore</a>
    </span>
</div>
<div class="row">
    <!-- Article Content-->
    <div class="col-lg-9">
        <div class="panel panel-default">
            <div class="panel-body">
                <form action="">
                    <input type="text" name="article-title" placeholder="Article title..." class="mb-lg form-control input-lg">
                    <!-- Wysiswyg tooblbar-->
                    <div data-role="editor-toolbar" data-target="#editor" class="btn-toolbar btn-editor">
                        <div class="btn-group dropdown">
                            <a data-toggle="dropdown" title="Font" class="btn btn-default">
                                <em class="fa fa-font"></em><b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="" data-edit="fontName Arial" style="font-family:'Arial'">Arial</a>
                                </li>
                                <li>
                                    <a href="" data-edit="fontName Sans" style="font-family:'Sans'">Sans</a>
                                </li>
                                <li>
                                    <a href="" data-edit="fontName Serif" style="font-family:'Serif'">Serif</a>
                                </li>
                            </ul>
                        </div>
                        <div class="btn-group dropdown">
                            <a data-toggle="dropdown" title="Font Size" class="btn btn-default">
                                <em class="fa fa-text-height"></em>&nbsp;<b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="" data-edit="fontSize 5" style="font-size:24px">Huge</a>
                                </li>
                                <li>
                                    <a href="" data-edit="fontSize 3" style="font-size:18px">Normal</a>
                                </li>
                                <li>
                                    <a href="" data-edit="fontSize 1" style="font-size:14px">Small</a>
                                </li>
                            </ul>
                        </div>
                        <div class="btn-group">
                            <a data-edit="bold" data-toggle="tooltip" title="Bold (Ctrl/Cmd+B)" class="btn btn-default">
                                <em class="fa fa-bold"></em>
                            </a>
                            <a data-edit="italic" data-toggle="tooltip" title="Italic (Ctrl/Cmd+I)" class="btn btn-default">
                                <em class="fa fa-italic"></em>
                            </a>
                            <a data-edit="strikethrough" data-toggle="tooltip" title="Strikethrough" class="btn btn-default">
                                <em class="fa fa-strikethrough"></em>
                            </a>
                            <a data-edit="underline" data-toggle="tooltip" title="Underline (Ctrl/Cmd+U)" class="btn btn-default">
                                <em class="fa fa-underline"></em>
                            </a>
                        </div>
                        <div class="btn-group">
                            <a data-edit="insertunorderedlist" data-toggle="tooltip" title="Bullet list" class="btn btn-default">
                                <em class="fa fa-list-ul"></em>
                            </a>
                            <a data-edit="insertorderedlist" data-toggle="tooltip" title="Number list" class="btn btn-default">
                                <em class="fa fa-list-ol"></em>
                            </a>
                            <a data-edit="outdent" data-toggle="tooltip" title="Reduce indent (Shift+Tab)" class="btn btn-default">
                                <em class="fa fa-dedent"></em>
                            </a>
                            <a data-edit="indent" data-toggle="tooltip" title="Indent (Tab)" class="btn btn-default">
                                <em class="fa fa-indent"></em>
                            </a>
                        </div>
                        <div class="btn-group">
                            <a data-edit="justifyleft" data-toggle="tooltip" title="Align Left (Ctrl/Cmd+L)" class="btn btn-default">
                                <em class="fa fa-align-left"></em>
                            </a>
                            <a data-edit="justifycenter" data-toggle="tooltip" title="Center (Ctrl/Cmd+E)" class="btn btn-default">
                                <em class="fa fa-align-center"></em>
                            </a>
                            <a data-edit="justifyright" data-toggle="tooltip" title="Align Right (Ctrl/Cmd+R)" class="btn btn-default">
                                <em class="fa fa-align-right"></em>
                            </a>
                            <a data-edit="justifyfull" data-toggle="tooltip" title="Justify (Ctrl/Cmd+J)" class="btn btn-default">
                                <em class="fa fa-align-justify"></em>
                            </a>
                        </div>
                        <div class="btn-group dropdown">
                            <a data-toggle="dropdown" title="Hyperlink" class="btn btn-default">
                                <em class="fa fa-link"></em>
                            </a>
                            <div class="dropdown-menu">
                                <div class="input-group ml-xs mr-xs">
                                    <input id="LinkInput" placeholder="URL" type="text" data-edit="createLink" class="form-control input-sm">
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-default">Add</button>
                                    </div>
                                </div>
                            </div>
                            <a data-edit="unlink" data-toggle="tooltip" title="Remove Hyperlink" class="btn btn-default">
                                <em class="fa fa-cut"></em>
                            </a>
                        </div>
                        <div class="btn-group">
                            <a id="pictureBtn" data-toggle="tooltip" title="Insert picture (or just drag &amp; drop)" class="btn btn-default">
                                <em class="fa fa-picture-o"></em>
                            </a>
                            <input type="file" data-edit="insertImage" style="position:absolute; opacity:0; width:41px; height:34px">
                        </div>
                        <div class="btn-group pull-right">
                            <a data-edit="undo" data-toggle="tooltip" title="Undo (Ctrl/Cmd+Z)" class="btn btn-default">
                                <em class="fa fa-undo"></em>
                            </a>
                            <a data-edit="redo" data-toggle="tooltip" title="Redo (Ctrl/Cmd+Y)" class="btn btn-default">
                                <em class="fa fa-repeat"></em>
                            </a>
                        </div>
                    </div>
                    <!-- Wysiswyg Editor-->
                    <div style="overflow:scroll; height:250px;max-height:250px" class="form-control wysiwyg mt-lg">Type something ...</div>
                    <br>
                    <p>Notes</p>
                    <textarea cols="6" class="mb-lg form-control"></textarea>
                    <div class="clearfix">
                        <div class="pull-left">
                            <button type="button" class="btn btn-default m-r-10 m-t-10">
                                <em class="fa fa-edit fa-fw"></em>Draft
                            </button>
                            <button type="button" class="btn btn-primary m-t-10">
                                <em class="fa fa-check fa-fw"></em>Save
                            </button>
                        </div>
                        <div class="pull-right">
                            <button type="button" class="btn btn-danger m-r-10 m-t-10">
                                <em class="fa fa-trash fa-fw"></em>Remove
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <p class="lead">List of Comments</p>
        <div class="panel">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>
                                <strong>Comment ID</strong>
                            </th>
                            <th>
                                <strong>Date</strong>
                            </th>
                            <th>
                                <strong>Username</strong>
                            </th>
                            <th>
                                <strong>Comment excerpt</strong>
                            </th>
                            <th class="text-center">
                                <strong>Current status</strong>
                            </th>
                            <th style="width:130px" class="text-right">
                                <strong>Actions</strong>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>123</td>
                            <td>10/05/2015</td>
                            <td>
                                <a href="">Jack Jordan</a>
                            </td>
                            <td>Sed quis eros libero, a euismod nisl....</td>
                            <td class="text-center">
                                <span class="label label-success">Approved</span>
                            </td>
                            <td class="text-right">
                                <button type="button" class="btn btn-sm btn-default">
                                    <em class="fa fa-pencil"></em>
                                </button>
                                <button type="button" class="btn btn-sm btn-danger">
                                    <em class="fa fa-trash"></em>
                                </button>
                                <button type="button" class="btn btn-sm btn-success">
                                    <em class="fa fa-check"></em>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>456</td>
                            <td>10/07/2015</td>
                            <td>
                                <a href="">Hailey Mckinney</a>
                            </td>
                            <td>Nulla facilisi.</td>
                            <td class="text-center">
                                <span class="label label-success">Approved</span>
                            </td>
                            <td class="text-right">
                                <button type="button" class="btn btn-sm btn-default">
                                    <em class="fa fa-pencil"></em>
                                </button>
                                <button type="button" class="btn btn-sm btn-danger">
                                    <em class="fa fa-trash"></em>
                                </button>
                                <button type="button" class="btn btn-sm btn-success">
                                    <em class="fa fa-check"></em>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>789</td>
                            <td>11/05/2015</td>
                            <td>
                                <a href="">Peyton Reyes</a>
                            </td>
                            <td>Quisque enim nisi, semper non pulvinar et, aliquam id lorem...</td>
                            <td class="text-center">
                                <span class="label label-warning">Pending</span>
                            </td>
                            <td class="text-right">
                                <button type="button" class="btn btn-sm btn-default">
                                    <em class="fa fa-pencil"></em>
                                </button>
                                <button type="button" class="btn btn-sm btn-danger">
                                    <em class="fa fa-trash"></em>
                                </button>
                                <button type="button" class="btn btn-sm btn-success">
                                    <em class="fa fa-check"></em>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>999</td>
                            <td>10/06/2015</td>
                            <td>
                                <a href="">Darryl Harper</a>
                            </td>
                            <td>Nulla facilisi.</td>
                            <td class="text-center">
                                <span class="label label-danger">Rejected</span>
                            </td>
                            <td class="text-right">
                                <button type="button" class="btn btn-sm btn-default">
                                    <em class="fa fa-pencil"></em>
                                </button>
                                <button type="button" disabled="" class="btn btn-sm btn-danger">
                                    <em class="fa fa-trash"></em>
                                </button>
                                <button type="button" class="btn btn-sm btn-success">
                                    <em class="fa fa-check"></em>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- Article sidebar-->
    <div class="col-lg-3">
        <div class="panel panel-default">
            <div class="panel-body">
                <p class="lead">Article Data</p>
                <p>Categories</p>
                <select multiple class="chosen-select form-control">
                    <option>coding</option>
                    <option>less</option>
                    <option>sass</option>
                    <option>angularjs</option>
                    <option>node</option>
                    <option>expressJS</option>
                </select>
                <p>Tags</p>
                <select multiple class="chosen-select form-control">
                    <option>JAVASCRIPT</option>
                    <option>WEB</option>
                    <option>BOOTSTRAP</option>
                    <option>SERVER</option>
                    <option>HTML5</option>
                    <option>CSS</option>
                </select>
                <p>Reviewers</p>
                <select multiple class="chosen-select form-control">
                    <option>adam@email.com</option>
                    <option>amalie@email.com</option>
                    <option>wladimir@email.com</option>
                    <option>samantha@email.com</option>
                    <option>estefanía@email.com</option>
                    <option>natasha@email.com</option>
                    <option>nicole@email.com</option>
                    <option>adrian@email.com</option>
                </select>
                <p class="lead">SEO Metadata</p>
                <div class="form-group">
                    <p>Title</p>
                    <input type="text" placeholder="Brief description.." class="form-control">
                </div>
                <div class="form-group">
                    <p>Description</p>
                    <textarea rows="5" placeholder="Max 255 characters..." class="form-control"></textarea>
                </div>
                <div class="form-group">
                    <p>Keywords</p>
                    <textarea rows="5" placeholder="Max 1000 characters..." class="form-control"></textarea>
                </div>
            </div>
        </div>
    </div>
</div>
@section Styles {
    @Styles.Render("~/bundles/chosenCss")
}
@section Scripts {
    @Scripts.Render("~/bundles/chosen")
    @Scripts.Render("~/bundles/wysiwyg")
    @Scripts.Render("~/bundles/demoForms")
}
